<template>
  <view class="apply_bank_success">
    <view class="top">
      <image :src="$store.state.imgBaseUrl + '/qrcode/result/success.png'" mode="" class="img"></image>
      <view class="title">
        信息审核通过-还差一步
      </view>
      <view class="tip">
        <view class="">
          还差最后一步就能完成银联收款码的申请了,
        </view>
        <view class="">
          请按照下方提示进行资料的准备
        </view>
        
      </view>
    </view>
    <view class="upload-file-sample">
      <view class="sample-all">
        <view class="left">
          <view class="dot" style="background-color: #C2AC78;"></view>
        </view>
        <view class="right">
          <view class="tip">
            <view class="">
              将下方《银联收款码申请协议需盖章部分》的四张图片长按保存至手机相册，并打印签字盖章
            </view>
            <view class="sample-sample" @click="previewImg(1)">
              示例
            </view>
          </view>
          <view class="content">
            <image :src="item.url" mode="" class="img" v-for="(item, index) in contractImages" :key="index"></image>
          </view>
          <view class="view-more" @click="viewMore" v-if="contractImages && contractImages.length > 0">
            查看完整文档
          </view>
        </view>
      </view>
      <view class="sample-item">
        <view class="left">
          <view class="dot" style="background-color: #FF7374;margin-right: 10rpx;"></view>
          <view class="">
            营业执照复印件并加盖公章示例
          </view>
        </view>
        <view class="right" @click="previewImg(2)">
          示例
        </view>
      </view>
      <view class="sample-item">
        <view class="left">
          <view class="dot" style="background-color: #4A59E6;margin-right: 10rpx;"></view>
          <view class="">
            开户证明(企业)或者银行卡(个人)复印件并加盖公章
          </view>
        </view>
        <view class="right" @click="previewImg(3)">
          示例
        </view>
      </view>
      <view class="sample-item">
        <view class="left">
          <view class="dot" style="background-color: #6FF1D1;margin-right: 10rpx;"></view>
          <view class="">
            法人身份证复印件并加盖公章
          </view>
        </view>
        <view class="right" @click="previewImg(4)">
          示例
        </view>
      </view>
    </view>
    <view class="teach-video-wrap">
      <view class="title">
        教学视频
      </view>
      <view class="content">
        <view class="video-wrap">
          <view class="sub-video-wrap">
            <video class="video" src="https://zy-image.oss-cn-hangzhou.aliyuncs.com/image/images/489363f838f98c81b35ea6b8702b244e.mp4" :show-progress="false" :enable-progress-gesture="false"></video>
            <view class="title">
              盖章示例
            </view>
          </view>
          <view class="sub-video-wrap">
            <video class="video" src="https://zy-image.oss-cn-hangzhou.aliyuncs.com/image/images/ea32a979b8002dad4a7560c5549c235d.mp4"></video>
            <view class="title">
              上传视频
            </view>
          </view>
        </view>
        <view class="tip">
          所有资料按要求操作完毕后，请根据示例视频进行拍照 上传，我们会第一时间为您提交审核。
        </view>
      </view>
      
    </view>
    <view class="footer">
      <button type="primary" class="btn" @click="goToPage">上传协议</button>
    </view>
  </view>
</template>

<script>
import { checkImage } from '@/unit/common.js'
import { getBankQrcodeFilesApi } from '@/service/qrCode/qrCode.service.js'
export default {
  data () {
    return {
      // bankCertificateCopiesImage: null, // 用户上传的开户证明复印件照片 ,
      // businessLicenseCopiesImage: null, // 用户上传的营业执照复印件照片 ,
      contractImages: [], // 用户需要下载的合同照片 , 1
      // idCardCopiesImage: null, // 用户上传的身份证复印件照片 ,
      // unionBusinessContract: null, // 银联业务申请表文档 ,1
      // unionCrossAreaImage: null, // 用户上传的跨地区申请表照片 ,
      // unionCrossContract: null, // 银联跨区申请表文档 ,1
      // unionPayBusinessImage: null, // 用户上传的业务申请书照片 ,
      // unionPayServiceImage: null, // 用户上传的服务协议照片 ,
      // unionServiceContract: null, // 银联服务协议文档 1
    }
  },
  onShow () {
    this.getBankQrcodeFiles();
  },
  methods: {
    previewImg (type) { // 查看示例图片
      switch (type) {
      case 1:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/chengnuoshu.jpg', this.$store.state.imgBaseUrl + '/qrcode/sample/pay_service.jpg', this.$store.state.imgBaseUrl + '/qrcode/sample/trans-regional.jpg', this.$store.state.imgBaseUrl + '/qrcode/sample/application_protocol.jpg'], 0);
        break;
      case 2:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/license.jpg'], 0);
        break;
      case 3:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/account-opening.jpg', this.$store.state.imgBaseUrl + '/qrcode/sample/person_bankcard.jpg'], 0);
        break;
      case 4:
        checkImage([this.$store.state.imgBaseUrl + '/qrcode/sample/identityCard.jpg'], 0);
        break;
      default:
      }
    },
    viewMore () { // 查看更多文档
      uni.navigateTo({
        url: '/pages/qrCode/applyBank/sample_list'
      })
    },
    goToPage () {
      uni.navigateTo({
        url: '/pages/qrCode/applyBank/uploadFile'
      })
    },
    getBankQrcodeFiles() {
      getBankQrcodeFilesApi({}, res => {
        if (res.status == 0) {
          this.contractImages = res.data.contractImages; // 用户需要下载的合同照片 , 1
          // this.unionBusinessContract = res.data.unionBusinessContract; // 银联业务申请表文档 ,1
          // this.unionCrossContract = res.data.unionCrossContract; // 银联跨区申请表文档 ,1
          // this.unionServiceContract = res.data.unionServiceContract; // 银联服务协议文档 1
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .apply_bank_success {
    min-height: 100vh;
    background-color: #FFFFFF;
    .dot {
      width: 10rpx;
      height: 10rpx;
      border-radius:50%;
      margin-top: 10rpx;
    }
    .top {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      .img {
        margin-top: 72rpx;
        width: 306rpx;
        height: 306rpx;
      }
      .title {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
        margin-top: 22rpx;
        color: #333333;
      }
      .tip {
        margin-top: 38rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        text-align: center;
        line-height: 50rpx;
      }
    }
    
    .upload-file-sample {
      padding: 0 32rpx;
      margin-top: 50rpx;
      .sample-all {
        padding: 18rpx 20rpx 0rpx 18rpx;
        border-radius:5px;
        box-shadow:0px 0px 16rpx 0px #7A7A7A;
        display: flex;
        .left {
          width: 20rpx;
        }
        .right {
          flex: 1;
          .tip {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            .sample-sample {
              width: 120rpx;
              color: #FF7473;
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 500;
              text-decoration: underline;
              text-align: right;
            }
          }
          .content {
            margin-top: 22rpx;
            display: flex;
            justify-content: space-between;
            .img {
              width: 144rpx;
              height: 212rpx;
            }
          }
          .view-more {
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }
        }
      }
      .sample-item {
        // line-height: 70rpx;
        box-shadow:0px 0px 16rpx 0px #7A7A7A;
        border-radius:5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 24rpx;
        margin-top: 20rpx;
        
        .left {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          .dot {
            margin: 0;
          }
        }
        .right {
          width: 80rpx;
          text-align: right;
          color: #FF7473;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          text-decoration: underline;
        }
      }
    }
    .teach-video-wrap {
      padding: 44rpx 30rpx 0;
      .title {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
      }
      .content {
        padding: 40rpx 54rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        .video-wrap{
          width: 100%;
          display: flex;
          justify-content: space-between;
          // align-items: center;
          .sub-video-wrap {
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: space-between;
            width: 48%;
            .video {
              width: 100%;
              // width: 250rpx;
              height: 360rpx;
              border-radius: 10rpx;
            }
            .title {
              margin-top: 16rpx;
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333
            }
          }
          
         
          
        }
        .tip {
          margin-top: 40rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          text-align: center;
          line-height: 50rpx;
        }
      }
      
    }
    .footer {
      display: flex;
      align-items: center;
      height: 114rpx;
      border-top: 2rpx solid #E1E1E1;
      .btn {
        width: 688rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #434343;
        border-radius: 10rpx;
        color: #F6DA99;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
  }
</style>
